<template>
	<el-main class="elmain" style="background-color: #FFFFFF;border-radius: 4px; ">
		<el-row>
			<el-col :span="4">  <el-button type="primary"  round @click="dialogVisible = true">+</el-button></el-col>
			<el-col :span="4"></el-col>
			<el-col :span="8"></el-col>
			<el-col :span="8">
				<el-button size="small" type="warning" v-if="ifselect" @click="selectUpdate">选中已读</el-button>
				<el-button size="small" type="warning" @click="allUpdate">全部已读</el-button>
			</el-col>


		</el-row>
		
		<el-table :data="useandsession" height="600" style="width: 100%" @selection-change="handleSelectionChange" @row-click="rowClick">
		 
			<el-table-column type="selection" prop="sessionId" width="55" />
			
		 
			<el-table-column width="80"><el-avatar :size="50" :src="circleUrl" style="align-items: center;"/></el-table-column>
		    <el-table-column  width="60" prop="userName">
			</el-table-column>
			<el-table-column width="30"><el-divider direction="vertical" /></el-table-column>
			
			
		    <el-table-column prop="newsSendTime" width="60" />
			<el-table-column width="10">:</el-table-column>
			<el-table-column prop="newsText" :show-overflow-tooltip="true"/>
				
			
			<el-table-column width="80" >
				<template #default="scope1">
				  <p v-if="scope1.row.unreadNumber>0&&scope1.row.unreadNumber<=99"><el-button type="danger" round size="small" >{{scope1.row.unreadNumber}}</el-button></p>
				  <p v-if="scope1.row.unreadNumber>99"><el-button type="danger" round size="small" >99+</el-button></p>
				</template>
			</el-table-column>
		 
	 </el-table>
	</el-main>
	
	
	<el-dialog
	    v-model="dialogVisible"
	    title="新建会话"
	    width="30%"
	    :before-close="handleClose"
	  >
	  <el-input v-model="input" placeholder="输入用户ID">用户ID</el-input><br />
	    <template #footer>
		  
	      
			  
	        <el-button @click="dialogVisible = false">取消</el-button>
	        <el-button type="primary" @click="createsession">提交</el-button>
	      
	    </template>
	  </el-dialog>
</template>

<script >
	import qs from 'qs'
	import ElMessage from 'element-plus'

export default{
	data(){
		return{
			ifselect:false,
			user:{},
			sessions:[],
			userInfo:[],
			ui:{},
			selectrow:[],
			useandsession:[],
			input:'',
			insertif:false,
			dialogVisible:false
		}
	},
	methods:{
		createsession(){
			this.dialogVisible=true
			console.log(this.input)
			var session={}
			var str=this.user.userId+"-"+this.input
			console.log(str)
			session.bothSidesId=str
			let sess=qs.stringify(session)
			let that=this
			that.$axios.get("http://localhost:8080/session/if?"+sess).then(function(res){
				if(res.data){
					that.$axios.get("http://localhost:8080/session/sessioninsert?"+sess).then(function(res){console.log(res)})
					that.dialogVisible=false
					that.$router.go(0)
				}
				else{
					that.$message({
						message:'会话已存在，不可重复创建！',
						type:'warning'
					});
					
				}
			})
			
			},
		rowClick(r){
			console.log(r)
			let that=this
			var  update={}
			update.sessionId=r.sessionId
			update.unreadNumber=0
			let str=qs.stringify(update)
			var local={}
			local.sessionId=r.sessionId
			local.bothid=r.userId
			local.bothA=r.userAvatar
			sessionStorage.setItem("sessionnews",JSON.stringify(local))
			that.$axios.get("http://localhost:8080/session/sessionupdate?"+str).then(function(res){console.log(res)})
			that.$router.push({name:'messaging',params:{sessionid:r.sessionId,bothid:r.userId,bothA:r.userAvatar}})
		},
		handleSelectionChange(arr){
			if(arr.length!=0){this.ifselect=true}
			else{this.ifselect=false}
			this.selectrow=arr
			console.log(this.selectrow)
		},
		init(){
			let that=this
			//let str=qs.stringify(that.userId)
			that.$axios.get("http://localhost:8080/session/sessionshow?userId="+that.user.userId).then(function(res){
				that.useandsession=res.data
				
				//console.log(res)
			})
			
		},
		selectUpdate(){
			let that=this
			for(var s in that.selectrow){
				var  update={}
				update.sessionId=that.selectrow[s].sessionId
				update.unreadNumber=0
				let str=qs.stringify(update)
				that.$axios.get("http://localhost:8080/session/sessionupdate?"+str).then(function(res){console.log(res)})
				
			}
			this.$router.go(0)
			//that.$axios.get("http://localhost:8080/session/sessionshow?userId="+that.user.userId)
			//console.log(e)
		},
		allUpdate(){
			let that=this
			for(var s in that.useandsession){
				var  update={}
				update.sessionId=that.useandsession[s].sessionId
				update.unreadNumber=0
				console.log(update)
				let str=qs.stringify(update)
				that.$axios.get("http://localhost:8080/session/sessionupdate?"+str).then(function(res){console.log(res)})
			}
			this.$router.go(0)
		}
		
	},
	created() {
		let loginUser=JSON.parse(sessionStorage.getItem("user"))
		this.user=loginUser
		this.init()
	}
}
</script>
<style >
	.elmain{
		box-shadow: var(--el-box-shadow);
	}
.scrollbar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>